<template>
  <div class="data-acquisition">
    <div class="all-my-task">
        <tab-header :tabList="tabList" @clickTab="clickTab"></tab-header>
    </div>
    <div class="table-content">
      <all-task v-if="tabValue === '1'"></all-task>
      <my-task v-if="tabValue === '2'"></my-task>
    </div>
  </div>
</template>

<script setup lang=ts>

import tabHeader  from '@/views/viewComponent/tabHeader.vue'
import { tabData } from '@/views/viewComponent/tabHeader.vue'
import { ref, reactive } from "vue";

import allTask from './allTask.vue'
import myTask from './myTask.vue'


let tabList: Array<tabData> = reactive([
  {
    name:'全部任务',
    value:'1'
  },
  {
    name:'我的任务',
    value:'2'
  }
]);

let tabValue = ref('1')

const clickTab = (data: tabData) =>{
  tabValue.value = data.value
}

</script>
<style lang='less'>
.data-acquisition{
  height:100%;
  .all-my-task{
    height: 68px;
    width: 100%;
    background: #F9FCFF;
    padding-left:8px;
    border-radius:5px;
  }
  .table-content{
    margin-top:10px;
    height: calc(100% - 100px);
    padding: 5px;
  }
}

</style>